<template>
	<view class="luckdraw ">
		<button type="primary">vue抽奖demo</button>
		
		<view class="lunk-wrap">
			<view class="luck-con">{{luckName}}</view>
		</view>
		<button type="primary" @click="getLuckName">开始抽奖</button>
		
		<view class="lunk-wrap2 luck-wrap3">
			<image class="bg" src="../../static/item_34.png" mode=""></image>
			<view class="time-limit">剩余时间: 202120</view>
			<view class="status-wait">等到中...</view>
			
			<view class="avatar-list">
				<view class="img-wrap" v-for="(item, index) in teamMember"  :key="item.id"  >
					<image
					 :src="item.avatar" 
					 :class="index===luckIndex?'avatar avatar-active':'avatar'"
					 @click="setLuckIndex(index)"
					 ></image>
				</view>
			</view>
			<view class="btn-start" @click="start2">点击开奖</view>
			
			<!-- 未中奖 -->
			<view class="view-luck">
				<image class="view-luck__img" src="../../static/img_01.png" mode=""></image>
				<view class="view-luck__title">幸运星</view>
				<view class="view-luck__info">
					<image class="view-luck__avatar" src="../../static/img_01.png" mode=""></image>
					<view class="view-luck__phone">18987422570</view>
				</view>
			</view>
			<view class="btn-start btn-getmoney" @click="start2">领取红包</view>
		</view>
		
		<!-- 中奖浮窗 -->
		<view class="pop-luck" @touchmove.stop.prevent="moveHandle">
			<view class="pop-luck__con">
				<view class="pop-luck-bg-wrap">
					<image class="pop-luck__bg" src="../../static/img_01.png" mode=""></image>
				</view>
				<view class="pop-luck__info">
					<image class="view-luck__avatar" src="../../static/img_01.png" mode=""></image>
					<view class="view-luck__phone">18987422570</view>
				</view>
				<image class="pop-luck__close"  src="../../static/common/icon_13.png" mode=""></image>
			</view>
		</view>
		
	<!-- 	<view class="lunk-wrap2">
			<image class="bg" src="../../static/item_34.png" mode=""></image>
			<view class="time-limit">剩余时间: 202120</view>
			<view class="avatar-wrap">
				<image class="avatar" v-for="item in teamMember"   :src="item.avatar" :key="item.id" :animation='item.animationData' mode=""></image>
			</view>
			<view class="btn-start" @click="start">点击开奖</view>
		</view> -->
		
	</view>
</template>

<script>
	export default{
		data() {
			return{
				animationData : {},
				name: ['罗冰酱', '娜美桑', '山治', '蒙奇D路飞', '罗罗诺亚索隆', '弗兰奇', '布鲁克', '甚平', '乔巴', '乌索普'],
				luckName: '',
				hostLuckName: '罗罗诺亚索隆',
				luckIndex: -1,
				hostLuckIndex: 2,
				luckTime: 2000, //抽奖时间 2s
				luckIntaral: 200, // 随机间隔时间
				
				teamMember: [
					{ id: 1, username: '罗冰酱', avatar: '../../static/common/avatar.png' },
					{ id: 2, username: '娜美桑', avatar: '../../static/img_01.png' },
					{ id: 3, username: '罗罗诺亚索隆 	', avatar: '../../static/item_02.png' },
					{ id: 4, username: '山治 	', avatar: '../../static/item_14.png' },
					{ id: 5, username: '弗兰奇 	', avatar: '../../static/item_15.png' },
					{ id: 7, username: '甚平 	', avatar: '../../static/item_16.png' },
					{ id: 8, username: '甚平 	', avatar: '../../static/common/icon_12.png' },
					{ id: 9, username: '甚平 	', avatar: '../../static/common/icon_13.png' },
					{ id: 10, username: '甚平 	', avatar: '../../static/common/icon_27.png' }
				]
			}
		},
		methods:{
			setLuckIndex(luckIndex) {
				this.luckIndex = luckIndex
			},
			
			start2() {
				// 获取随机索引
				let sumTime = 0
				let len = this.teamMember.length
				let timer = setInterval(() => {
					let random = Math.floor(Math.random() * len)
					console.log(random)
					this.luckIndex = random
					sumTime += this.luckIntaral
					console.log(sumTime)
					if(sumTime === this.luckTime) {
						clearInterval(timer)
						this.luckName = this.hostLuckName
						this.luckIndex = this.hostLuckIndex
					}
				}, this.luckIntaral)
				
				console.log(sumTime)
			},
			
			getLuckName() {
				let timer = setInterval(() => {
					let length = this.name.length
					// console.log(length)
					let index = Math.floor(Math.random()*length)
					// console.log(index)
					this.luckName = this.name[index]
				}, 50)
				setTimeout(() => {
					clearInterval(timer)
					this.luckName = this.hostLuckName
					 uni.showModal({
						title:'抽奖结果',
						content:this.turLuckName,
						showCancel:false
					}) 
				}, this.luckTime)
			},
			
			
			start() {
				 let animation = uni.createAnimation({
					 transformOrigin: '50% 50%',
					  duration: 5000,
					  timingFunction: 'ease-ease-in-out',
					  delay: 1000
				})
				
				
				let teamNum = this.teamMember.length 
				let degAvg = Math.floor(360 / teamNum)
				console.log(degAvg)
				console.log(Math.PI)
				let deg = 0
				let temp = this.teamMember.map(item => {
					let x = Math.cos(this.getRag(deg)) * 100
					let y = Math.sin(this.getRag(deg)) * 100
					item.x = x
					item.y = y
					item.animationData = animation.translate(x, y).scale(2, 2).step().export()
					deg += degAvg
					return item
				})
				console.log(temp)
				this.teamMember = temp
			},
			getRag(deg) {
				return (deg * Math.PI) / 180
			},
			moveHandle() {
				// 空事件，阻止mask下面页面滚动
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../app.less");
	.luckdraw{
		.content-20;
	}
	.luck-wrap3{
		.status-wait{
			color: #fff;
			position: relative;
			width: 100%;
			text-align: center;
			font-size: 30px;
			margin-bottom: 10px;
			letter-spacing: 0.3em;
		}
		.avatar-list{
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
			width: 100%;
			.flex-base;
			justify-content: center;
			flex-wrap: wrap;
		}
		.img-wrap{
			width: 90rpx;
			height: 90rpx;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
		}
		.avatar{
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			display: block;
			transition: all 0.2s ease-in;
		}
		.avatar-active{
			transform: scale(1.2,1.2);
			box-shadow: 0px 0px 15px 0px rgba(255,255,255,1);
			border: 1px solid @f;
		}
	}
	
	// 未中奖
	.view-luck{
		position: relative;
		width: 400rpx;
		height: 150rpx;
		.flex-base;
		.view-luck__img{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.view-luck__title{
			width: 30rpx;
			height: 100rpx;
			background-color: @font-orange-color;
			writing-mode: tb;
			position: relative;
			line-height: 30rpx;
		}
		.view-luck__info{
			padding: 20rpx;
			box-sizing: border-box;
			border: 1px solid @font-orange-color;
			.flex-base;
			position: relative;
		}
		.view-luck__avatar{
			width: 40rpx;
			height: 40rpx;
			border-radius: 100%;
			display: block;
		}
		.view-luck__phone{
			.fw;
			color: @f;
			font-size: 30rpx;
		}
		
	}
	
	.luck-wrap3{
		.btn-getmoney{
			.fw;
			color: @theme-color !important;
		}
	}
	
	.pop-luck{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.4);
		.flex-base;
		flex-direction: column;
		justify-content: center;
		.pop-luck__con{
			position: relative;
			.flex-base;
			justify-content: center;
			flex-direction: column;
		}
		.pop-luck-bg-wrap{
			width: 80vw;
			height: 80vw;
			position: absolute;
			left: 0;
			top: 0;
			animation: rotate 5s linear;
			animation-iteration-count: infinite;
		}
		.pop-luck__bg{
			width: 100%^;
			height: 100%;
		}
		.pop-luck__close{
			width: 50rpx;
			height: 50rpx;
		}
		@keyframes rotate{
			0% { transform: rotate(0); }
			100% { transform: rotate(360deg); }
		}
	}
	
	
	.lunk-wrap{
		.content-20;
		.flex-base;
		justify-content: center;
		margin-top: 100upx;
		margin-bottom: 100upx;
		height: 300upx;
		border: 1px solid @border-color;
	}
	.lunk-wrap2{
		position: relative;
		width: 100%;
		.flex-base;
		justify-content: center;
		flex-direction: column;
		padding: 40rpx;
		box-sizing: border-box;
		.bg{
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			position: absolute;
			display: block;
		}
		.time-limit{
			position: relative;
			.f24;
			color: @f;
			border: 1px solid @f;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			padding: 0 20rpx;
			border-radius: 50rpx;
		}
		.avatar-wrap{
			position: relative;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			padding: 40rpx 80rpx;
			background-color: @f;
			/* height: 160rpx;
			width: 400rpx; */
			box-sizing: border-box;
			
			.br;
			.avatar{
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
				display: block;
			}
		}
		.avatar-con{
			width: 100%;
			height: 100%;
			.flex-base;
			justify-content: center;
			 transition: all 2s ease-in-out;
			/* animation: myfirst 2s;
			animation-iteration-count: infinite; */
		}
		
		@keyframes myfirst
		{
		    0%   {transform: translateX(0px);}
		    100% {transform: translateX(300px);}
		}
		.btn-start{
			position: relative;
			.f26;
			.fw;
			color: #87611b;
			background-color: @f;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 20rpx;
			border-radius: 60rpx;
		}
	}
	
</style>
